<template>
	<view class="bigView">
		<view class="topView">
			<view class="itemInput" style="margin-top: 8px;">
				<view class="leftLabel2">*</view>
				<view class="leftLabel">姓名</view>
				<u--input class="customInput" placeholder="请输入内容" border="surround" v-model="form.name"	
				inputAlign="right"></u--input>
			</view>
			<view class="itemInput">
				<view class="leftLabel2">*</view>
				<view class="leftLabel">手机号</view>
				<u--input class="customInput" placeholder="请输入内容" border="surround"
				    v-model="form.phone"	inputAlign="right"></u--input>
			</view>
			<view class="itemInput">
				<view class="leftLabel2">*</view>
				<view class="leftLabel">工号</view>
				<u--input class="customInput" placeholder="请输入内容" border="surround"
				    v-model="form.empId"	inputAlign="right"></u--input>
			</view>
			<view class="itemInput">
				<view class="leftLabel2">*</view>
				<view class="leftLabel">身份证号码</view>
				<u--input class="customInput" placeholder="请输入内容" border="surround"
				    v-model="form.empCard"	inputAlign="right"></u--input>
			</view>
		</view>
		<view class="bottomView" :style="[{height:bottom + 'px'}]">
			<view class="sure" @click="sureHandle">确定</view>
		</view>
	</view>
</template>

<script>
	import { isJZNull } from '../../utils/auth';
import mine from '@/api/mine.js'
	export default{
		components:{
		},
		data(){
			return {
				bottom:0,
				form:{
					name:'',
					empId:'',
					phone:'',
					empCard:''
				}
			}
		},
		mounted() {
			uni.getSystemInfo({success: (e) => {
				// this.StatusBar = e.statusBarHeight;
				let custom = wx.getMenuButtonBoundingClientRect();
				this.bottom = custom.bottom;
				// this.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
				// this.TopHeight = this.CustomBar+100;//this.StatusBar+this.CustomBar;
			}})
		},
		methods:{
			sureHandle(){
				if (isJZNull(this.form.name)) {
					uni.showToast({
						icon:'none',
						title:'姓名不能为空'
					})
					return
				}
				if (isJZNull(this.form.phone)) {
					uni.showToast({
						icon:'none',
						title:'手机号不能为空'
					})
					return
				}
				if (isJZNull(this.form.empId)) {
					uni.showToast({
						icon:'none',
						title:'工号不能为空'
					})
					return
				}
				if (isJZNull(this.form.empCard)) {
					uni.showToast({
						icon:'none',
						title:'身份证号不能为空'
					})
					return
				}
				uni.showLoading({
					title:'提交中...'
				})
				mine.synchronousUserInfoHandle(this.form).then(res =>{
					uni.hideLoading()
					uni.showToast({
						title: '操作成功'
					})
					setTimeout(() => {
						uni.navigateBack()
					},500)
				}).catch(error =>{
					uni.hideLoading()
				})
			}
		},
		onReady() {
			
		}
	}
</script>

<style lang="scss" scoped>
	// $screenWidth: 100vw;
	// $marginLeft: 32px;
	$faceWidth: calc(100vw - 60px);
.bigView{
	width: 100vw;
	height: 100vh;
	background-color: #F7F7F7;
	display: flex;
	flex-direction: column;
	// align-items: center;
	// justify-content: center;
}
.topView{
	flex-grow: 1;
	// width: 100vw;
	// background-color: green;
	display: flex;
	flex-direction: column;
	// justify-content: center;
}

.bottomView{
	height: 150px;
	width: 100vw;
	// background-color: yellow;
	display: flex;
	justify-content: center;
	.sure{
		width: calc(100vw - 32px);//calc(100vw-#{32px});
		height: 48px;
		border-radius: 24px;
		background-color: #247BFD;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
	}
}

.itemInput{
		display: flex;
		flex-direction: row;
		height: 51px;
		background-color: white;
		align-items: center;
	}
	.leftLabel{
		padding-left: 2px;
	}
	.leftLabel2{
		padding-left: 16px;
		color: red;
	}
.subTitle{
	flex-grow: 1;
	margin-left: 10px;
	margin-right: 4px;
	text-align: right;
	color: #999999;
}
</style>